<template>
  <div>
    <transition @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
      <div  class="ball" v-show="ballShow" ref="ball"></div>
		</transition>
     <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-swipe :auto="4000">
								<mt-swipe-item v-for="img in imglist" :key="img.img_id">
									<img :src="imgurl+img.img_url" alt="无法加载了-_-">
								</mt-swipe-item>
						</mt-swipe>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">{{goodsInfo.p_name}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                市场价：<del>￥{{goodsInfo.p_importPrice}}万元</del>&nbsp;&nbsp;
                销售价：<span>￥{{goodsInfo.p_sellPrice}}万元</span>
            </p>
            <div id="numys">购买数量：
              <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                <input id="test" class="mui-input-numbox" type="number" value="1" ref="buynum"/>
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
              </div>
            </div>
            <p>
              <mt-button type="primary" size="small">立即购买</mt-button>
              <mt-button type="danger" size="small" @click="startBall">加入购物车</mt-button>
            </p>
					</div>
				</div>
			</div>
		<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<!-- <p>商品货号：{{goodsInfo.goodshh}}</p> -->
						<p>库存情况：{{goodsInfo.p_number}}</p>
						<p>上架时间：{{goodsInfo.p_date | dateFmt}}</p>

					</div>
					<div class="mui-card-footer">
						<mt-button type="primary" size="large" plain @click="goDesc('tab-container1')">图文介绍</mt-button>
						<mt-button type="danger" size="large" plain @click="goComments('tab-container2')">商品评论</mt-button>
					</div>
          <div class="otherpage">
            <mt-tab-container v-model="active">
              <mt-tab-container-item id="tab-container1">
                    <div class="mui-content">
                      <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            厂商：<span class="mui-pull-right">{{manufacturer.m_name}}</span>
                          </a>
                        </li>
                        <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            级别：<span class="mui-pull-right">{{classify.c_nickname}}</span>
                          </a>
                        </li>
                        <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            能源类型：<span class="mui-pull-right">{{energy.en_nickname}}</span>
                          </a>
                        </li>
                        <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            环保标准：<span class="mui-pull-right">{{protect.pr_name}}</span>
                          </a>
                        </li>
                        <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            上市时间：<span class="mui-pull-right">{{goodsInfo.p_date}}</span>
                          </a>
                        </li>
                        <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            最大功率(kW)：<span class="mui-pull-right">{{goodsInfo.p_kw}}</span>
                          </a>
                        </li>
                        <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            最大扭矩(N·m)：<span class="mui-pull-right">{{goodsInfo.p_nm}}</span>
                          </a>
                        </li>
                        <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            发动机：<span class="mui-pull-right">{{goodsInfo.p_fdj}}</span>
                          </a>
                        </li>
                        <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            变速箱：<span class="mui-pull-right">{{goodsInfo.p_bs}}</span>
                          </a>
                        </li>
                         <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            长*宽*高(mm)：<span class="mui-pull-right">{{goodsInfo.p_ckg}}</span>
                          </a>
                        </li>
                         <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            车身结构：<span class="mui-pull-right">{{goodsInfo.p_cg}}</span>
                          </a>
                        </li>
                         <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            最高车速(km/h)：<span class="mui-pull-right">{{goodsInfo.p_km}}</span>
                          </a>
                        </li>
                         <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            官方0-100km/h加速(s)：<span class="mui-pull-right">{{goodsInfo.p_s}}</span>
                          </a>
                        </li>
                         <li class="mui-table-view-cell">
                          <a class="mui-navigate-right">
                            整车质保：<span class="mui-pull-right">{{goodsInfo.p_zp}}</span>
                          </a>
                        </li>
                      </ul>	
                    <div class="mui-content">
                        <div class="mui-content-padded">
                          
                          <p class="img">
                            <!-- <img :src="imgurl+goodsInfo.p_picture" data-preview-src="" data-preview-group="1" /> -->
                          </p>
                         <p>
                            <!-- <img src="../images/muwu.jpg" data-preview-src="" data-preview-group="1" /> -->
                          </p>
                      
                          <p>
                            <!-- <img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" /> -->
                          </p>
                        </div>
                      </div>
                    </div>
                
              </mt-tab-container-item>
              <mt-tab-container-item id="tab-container2">
                <!-- 商品评论 -->
                <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                  <li class="mui-table-view-cell">
                   <div class="cmt-list">
                      <div class="cmt-item" v-for="(e,i) in evaluate" :key="e.e_id">
                        <div class="cmt-title">
                          第{{i+1}}楼&nbsp;用户：{{e.u_nickname}}&nbsp;
                          发表时间：{{e.e_date | dateFmt('YYYY-MM-DD')}}
                        </div>
                        <div class="cmt-body">
                          {{e.e_content}}
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <div>
                  <div class="mui-input-row" style="margin: 10px 5px 20px;">
                    <textarea id="e_content" rows="5" placeholder="发表评论" v-model="e_content"></textarea>
                    <mt-button type="primary" class="pjbtn" @click='addcomment'>发表</mt-button>
                  </div>
                </div>
              </mt-tab-container-item>
            </mt-tab-container>
          </div>
				</div>
			</div>
  </div>
</template>

<script>
import {Toast} from 'mint-ui'
import moment from 'moment'
import mui from "../../lib/mui/js/mui.min.js"
export default {
  filters:{
    "dateFmt":function(str,pattern){
      return moment(str).format("YYYY-MM-DD");
    }
  },
  data(){
    return {
      u_id:'',
      pid:0,
      goodsInfo:{},
      energy:{},
      classify:{},
      manufacturer:{},
      evaluate:[],
      imgurl:"http://localhost:3000/images/car/",
      buynum:1,
      ballShow:false,
      protect:{},
      imglist:[
        {
          img_url:"保时捷/保时捷718/1.jpg",
        }
      ],
      e_content:'',
      active:'tab-container1',
      currentsize:1,//用来记忆当前的页码
      pagesize:3,
      totalPage:0
      // evaluate:{}
      // productInfo:{}
    }
  },
  methods:{
    initInfo(){
      let pid = this.$route.params.pid;
      this.pid = pid;
    
      // 加载用户信息
      this.$ajax({
        url:'before/productinfo/'+pid,
        method:"get"
      }).then(resp=>{
        this.goodsInfo = resp.data.message[0];
        this.getenergy(this.goodsInfo.p_energy_id);
        this.getprotect(this.goodsInfo.p_protect_id)
        this.getclassify(this.goodsInfo.p_classify_id)
        this.getmanufacturer(this.goodsInfo.P_s_id)
        this.getevaluate(this.goodsInfo.p_id)
        
      });
      // 加载图片
      this.$ajax({
        url:"before/imgcar/"+this.pid,
        method:"get"
      }).then(resp=>{
        this.imglist = resp.data.message;
      })
      // 初始化商品信息
      // this.getProductInfo(this.goodsInfo.p_id);
    },
    initProp(){
      // let uid = localStorage.getItem("uid");
      let userInfobd = JSON.parse(localStorage.getItem("userInfo"));
      if(userInfobd.length==0){
        let userInfo = this.$store.getters.getUserInfo;
        if(userInfo.length==0){
          this.$router.push("/user/login");
          return true;
        }
      }
    },
    // 半场动画
    startBall(){
       if(this.goodsInfo.p_number<=0){
        Toast('已售空')
        return
      }
      // 判断用户是否登录
      let userstate = this.initProp();
      if(userstate)return;
      this.ballShow = !this.ballShow;
      this.buynum = this.$refs.buynum.value;
      // c_p_id,c_num,c_u_id,p_img,p_name,p_price,c_selected
      let uid = JSON.parse(localStorage.getItem("uid"));
      let goodsInfo = {
        c_p_id:parseInt(this.pid),
        c_num:parseInt(this.buynum),
        p_price:parseFloat(this.goodsInfo.p_sellPrice),
        p_name:this.goodsInfo.p_name,
        p_img:this.imgurl+this.imglist[0].img_url,
        c_u_id:parseInt(uid),
        c_status:true,//未结算
        c_selected:true//选中  
      }
     
      // console.log(goodsInfo);
      this.$store.commit("addToCars",goodsInfo);
    },
    beforeEnter(el){
      el.style.transform = "translate(0,0)";
    },
    enter(el,done){
      el.offsetWidth;
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      const badgePosition = document.getElementById("badge").getBoundingClientRect();
      let x = badgePosition.left - ballPosition.left;
      let y = badgePosition.top - ballPosition.top;
      el.style.transform = `translate(${x}px,${y}px)`;
      el.style.transition = "all 1s ease";
      done();
    },
    afterEnter(el){
      this.ballShow = !this.ballShow;
    },
    goDesc(acitveval){
      this.active = acitveval; 
    },
    goComments(acitveval){
      this.active = acitveval;
    },
    getenergy(eid){
       
        this.$ajax({   
        url:'before/energy/'+eid,
        method:"get"
      }).then(resp=>{
        this.energy = resp.data.message[0];
      });
    } ,
    getprotect(pid){
      this.$ajax({   
        url:'before/protect/'+pid,
        method:"get"
      }).then(resp=>{
        this.protect = resp.data.message[0];
      });
    },
    getclassify(cid){
      this.$ajax({   
        url:'before/classify/'+cid,
        method:"get"
      }).then(resp=>{
        this.classify = resp.data.message[0];
      });
    },
    getmanufacturer(mid){
      this.$ajax({   
        url:'before/manufacturer/'+mid,
        method:"get"
      }).then(resp=>{
        this.manufacturer = resp.data.message[0];
      });
    },
    getevaluate(p_id){
        this.$ajax({
        url:"before/evaluates",
        method:"get",
        params:{
          e_p_id:p_id,
          currentsize:this.currentsize,
          pagesize:this.pagesize
        }
      }).then(resp=>{
        if(this.currentsize ==  1){
          this.evaluate = resp.data.message;//当前页的数据
        }else{
          this.evaluate.push(...resp.data.message) ;//当前页的数据
        }
        this.totalPage = resp.data.fyobj;//总的页码
        
      });
    },
    addcomment(){
         var aData = new Date();
         this.value =aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
          let person = { 
          // e_content,e_date,e_p_id,e_u_id
                "e_content":this.e_content,
                "e_date":this.value,
                "e_p_id":this.goodsInfo.p_id,
                "e_u_id": this.uid               
            }
            this.$ajax({
                url:"before/addevaluate",
                method:"post",
                data:person
            }).then(resp=>{
                this.e_content=""
                Toast('添加成功')
                return
            });
    }
  },

  created(){ 
    this.initInfo();
   let uid=JSON.parse(localStorage.getItem("uid")) 
    this.uid=uid
  },
  mounted() {
    mui('.mui-numbox').numbox();    
  }
}
</script>

<style scoped>
.mint-swipe{
  height: 200px;
}
.mint-swipe-item img{
   width:100%;
   height: 100%;
}
#numys{
  margin: 10px 5px;
}
.pjbtn{
  right: 0px;
}
.ball{
	width: 15px;
	height: 15px;
	background-color: red;
	border-radius: 50%;
	position:absolute;
	z-index: 99;
	left:150px;
	top:380px;
}
.img{
  width: 100%;
  height: 100%;
}
img{
  width: 100%;
}
</style>